<template>
  <div class="wrap">
    <ul class="app-settings">
      <li>
        <h3>应用包信息</h3>
        <div class="app-info">
          <div class="app-icon">
            <img :src="appInfo.icon" alt="">
          </div>
          <dl class="app-desc left">
            <dt>应用包名:</dt>
            <dd>{{appInfo.packageInfo.packageName}}</dd>
            <dt>应用名称:</dt>
            <dd>{{appInfo.packageInfo.appName}}</dd>
            <dt>应用版本:</dt>
            <dd>{{appInfo.packageInfo.version}}</dd>
            <dt class="status">默认语言:</dt>
            <dd class="status">{{appInfo.packageInfo.lang}}</dd>
          </dl>
          <dl class="app-desc right">
            <dt>系统支持:</dt>
            <dd>{{appInfo.packageInfo.osSupport}}</dd>
            <dt>权限需求:</dt>
            <dd>{{appInfo.packageInfo.permissionList.length}}个权限需求</dd>
            <dt>文件大小:</dt>
            <dd>{{appInfo.packageInfo.size}}kb</dd>
          </dl>
        </div>
      </li>

      <li>
        <h3>设置应用类型</h3>
        <el-form ref="form" :model="form1" label-width="80px">
          <el-form-item label="应用类型">
            <el-radio-group v-model="form1.type" prop="type">
              <el-radio :label="0">手机</el-radio>
              <el-radio :label="1">平板</el-radio>
              <el-radio :label="2">手机和平板</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="应用分类">
            <el-select v-model="form1.category" placeholder="请选择">
              <el-option
                v-for="item in categoryOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </li>

      <li>
        <h3>设置应用上线范围</h3>
        <el-form ref="form2" :model="form2" label-width="80px">
          <el-form-item label="上线时间">
            <el-select v-model="form2.releaseTime" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </li>
    </ul>

    <div class="button-group">
      <el-button type="primary" @click="next">下一步</el-button>
    </div>
  </div>
</template>

<script>
  import { fetchAppInfo, submitAppInfo } from '@/api/apps'
  export default {
    data(){
      return {
        appInfo: {
          "icon": "",
          "packageInfo": {
            "packageName": "",
            "appName": "",
            "version": "",
            "lang": "",
            "osSupport": "",
            "permissionList": [],
            "size": 0
          }
        },
        form1: {
          type: '',
          category: ''
        },
        form2: {
          releaseTime: '',
        },
        categoryOptions: [
          {
            value: 'VR',
            label: 'VR'
          },{
            value: '创意',
            label: '创意'
          }
        ],
        options: [
          {
            value: '审核后立即上线',
            label: '审核后立即上线'
          },{
            value: '定时上线',
            label: '定时上线'
          }
        ]
      }
    },
    methods:{
      next(){
        submitAppInfo(this.$route.query.id, this.form1, this.form2).then(res => {
          this.$router.push({
            name: 's2',
            query: {
              id: this.$route.query.id
            }
          })
        })
      }
    },
    created(){
      fetchAppInfo(this.$route.query.id).then(res => {
        this.appInfo = res.data
        this.form1.type = res.data.type,
        this.form1.category = res.data.category
      })
    }
  }
</script>

<style lang="scss" scoped>
  .wrap{
    .app-settings{
      width: 100%;
      list-style-type: none;
      padding: 0;
      margin: 40px 0 0 0;
      border-top: 1px solid #ccc;
      li{
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20px 0px;
        border-bottom: 1px solid #ccc;
        h3{
          font-size: 15px;
          margin-bottom: 0 0 30px 0;
        }
        dt{
          clear: left;
        }
        dd, dt{
          display: inline-block;
          float: left;
          font-size: 14px;
          font-weight: 400;
          margin-bottom: 6px;
        }
        .app-info{
          display: flex;
          justify-content: center;
          align-items: center;
          .app-icon{
            position: relative;
            width: 50px;
            height: 50px;
            margin-right: 66px;
            img{
              width: 100%;
              height: 100%;
            }
          }
          .app-desc.left{
            margin-right: 40px;
          }
        }
      }
    }
    .button-group{
      display: flex;
      justify-content: center;
      margin: 40px 0;
    }
  }
</style>
